import React, {Component} from 'react';
import {Table} from 'antd';<%if(bottomToolItems && bottomToolItems.length){%>
import FixBottom from '@/layouts/fix-bottom';<%}%>
import {<%if(queryItems && queryItems.length){%>
    QueryBar,
    QueryItem,<%}%><%if(bottomToolItems && bottomToolItems.length){%>
    ToolItem,<%}%>
    Pagination,
    Operator,<%if(toolItems && toolItems.length){%>
    ToolBar,<%}%>
} from "@/library/antd";
import PageContent from '@/layouts/page-content';
import config from '@/commons/config-hoc';<%if(permissionPrefix){%>
import {hasPermission} from '@/commons';<%}%>
import <%= capitalName %>Edit from './<%= capitalName %>Edit';
import { list, del } from '@/api/<%= name %>'

@config({
    path: '<%= routePath %>',
})
export default class <%= capitalName %>List extends Component {
    state = {
        loading: false,
        dataSource: [],//列表数据
        total: 0, //数据总条数
        pageSize: 10, //每页数量
        pageNum: 1, //当前页码
        params: {},
        formData: {},//添加、编辑表单数据
        visible: false,
    };<%if(queryItems && queryItems.length){%>

    // TODO 查询条件
    queryItems = [
        [<% for (let i = 0;i<queryItems.length;i++){%>
            {
                type: '<%= queryItems[i].type%>',
                field: '<%= queryItems[i].field%>',
                label: '<%= queryItems[i].label%>',
            },<%}%>
        ],
    ];<%}%><%if(toolItems && toolItems.length){%>

    // TODO 顶部工具条
    toolItems = [<% for (let i = 0;i<toolItems.length;i++){%>
        {
            type: '<%= toolItems[i].type%>',
            text: '<%= toolItems[i].text%>',
            icon: '<%= toolItems[i].icon%>',<%if(permissionPrefix && toolItems[i].permission){%>
            visible: hasPermission('<%= permissionPrefix %>:<%= toolItems[i].permission%>'),<%}%>
            onClick: () => {
                // TODO
            },
        },<%}%>
    ];<%}%><%if(bottomToolItems && bottomToolItems.length){%>

    // TODO 底部工具条
    bottomToolItems = [<% for (let i = 0;i<bottomToolItems.length;i++){%>
        {
            type: '<%= bottomToolItems[i].type%>',
            text: '<%= bottomToolItems[i].text%>',
            icon: '<%= bottomToolItems[i].icon%>',<%if(permissionPrefix && bottomToolItems[i].permission){%>
            visible: hasPermission('<%= permissionPrefix %>:<%= bottomToolItems[i].permission%>'),<%}%>
            onClick: () => {
                // TODO
            },
        },<%}%>
    ];<%}%>

    //列表数据
    columns = [<% for (let i = 0;i<fields.length;i++){%>
        {title: '<%= fields[i].title%>', dataIndex: '<%= fields[i].dataIndex%>'},<%}%>
        {
            title: '操作',
            key: 'operator',
            render: (text, record) => {
                const {id, <%= fields[0].dataIndex%>} = record;
                const items = [
                    {
                        label: '修改',<% if(permissionPrefix){%>
                        visible: hasPermission('<%= permissionPrefix %>:edit'),<%}%>
                        onClick: () => {
                            this.handleEdit(record);
                        },
                    },
                    {
                        label: '删除',
                        color: 'red',<% if(permissionPrefix){%>
                        visible: hasPermission('<%= permissionPrefix %>:del'),<%}%>
                        confirm: {
                            title: `您确定要删除“${<%= fields[0].dataIndex%>}”？`,
                            onConfirm: () => {this.handleDel(id)},
                        },
                    },
                ];

                return (<Operator items={items}/>);
            },
        },
    ];

    componentDidMount() {
        this.handleSearch();
    }

    /**
     * 获取列表
     */
    handleSearch = () => {
        const {params, pageNum, pageSize} = this.state;

        this.setState({loading: true});
        list({...params, pageNum, pageSize})
            .then(res => {
                if (res) {
                    const {records: dataSource, total} = res;
                    this.setState({
                        dataSource,
                        total,
                    });
                }
            })
            .finally(() => this.setState({loading: false}));
    };

    /**
     * 处理删除数据
     */
    handleDel(id) {
        this.setState({loading: true});
        del({id})
            .then(() => {
                let dataSource = [...this.state.dataSource]
                dataSource.forEach((e, i) => {
                    if (id === e.id) {
                        dataSource.splice(i, 1)
                    }
                });
                this.setState({ dataSource })
            })
            .finally(() => this.setState({loading: false}));
    }

    /**
     * 处理添加
     */
    handleAdd = () => {
        this.setState({formData: {}, visible: true});
    };

    /**
     * 处理编辑
     */
    handleEdit = (formData) => {
        this.setState({formData, visible: true});
    };

    /**
     * 添加、编辑成功后回调
     */
    handleOk(id, data) {
        let dataSource = []
        if (id) {
            dataSource = [...this.state.dataSource]
            dataSource.forEach((e, i) => {
                if (e.id === id) {
                    dataSource[i] = data
                }
            });
        } else {
            dataSource = [data, ...this.state.dataSource]
        }
        this.setState({ visible: false, dataSource })
    }

    render() {
        const {
            loading,
            dataSource,
            total,
            pageNum,
            pageSize,
            visible,
            formData,
        } = this.state;

        return (
            <PageContent loading={loading}><%if(queryItems && queryItems.length){%>
                <QueryBar>
                    <QueryItem
                        loadOptions={this.fetchOptions}
                        items={this.queryItems}
                        onSubmit={params => this.setState({params}, this.handleSearch)}
                    />
                </QueryBar>
                <%}%><%if(toolItems && toolItems.length){%>
                <ToolBar items={this.toolItems}/>
                    <%}%>
                <Table
                    columns={this.columns}
                    dataSource={dataSource}
                    rowKey="id"
                    pagination={false}
                />

                <Pagination
                    total={total}
                    pageNum={pageNum}
                    pageSize={pageSize}
                    onPageNumChange={pageNum => this.setState({pageNum}, this.handleSearch)}
                    onPageSizeChange={pageSize => this.setState({pageSize, pageNum: 1}, this.handleSearch)}
                /><%if(bottomToolItems && bottomToolItems.length){%>
                <FixBottom>
                    <ToolItem items={this.bottomToolItems}/>
                </FixBottom><%}%>

                <<%= capitalName %>Edit
                    formData={formData}
                    visible={visible}
                    onOk={this.handleOk.bind(this)}
                    onCancel={() => this.setState({visible: false})}
                />
            </PageContent>
        );
    }
}
